<template>
	<u-upload :fileList="imgList" @afterRead="afterRead" @delete="deletePic" :name="name" multiple :maxCount="maxCount"></u-upload>
</template>

<script>
export default {
	props: {
		// 最大图片数
		maxCount: {
			type: Number,
			default: 1
		},
		// 组件名字
		name: {
			type: String,
			default: 'upLoadFile'
		},
		// 图片数组
		fileList: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			imgList: []
		};
	},
	watch: {
		fileList(info) {
			this.imgList = this.fileList;
		}
	},
	methods: {
		// 读取后的处理函数
		async afterRead(file, index) {
			const res = await this.$api.thirdParty.uoloadFile(file);
			this.imgList.push({ url: res.data.url });
			this.$emit('update:fileList', this.imgList);
		},
		// 删除图片
		deletePic(info) {
			this.imgList.splice(info.index, 1);
			this.$emit('update:fileList', this.imgList);
		}
	}
};
</script>

<style></style>
